<script setup>
import { useRoute, useRouter } from "vue-router";
import { computed, reactive, ref } from "vue";
import { useCartStore } from "@/stores";
import { CommonCartEffect } from "./CommonCartEffect.js";
let show = ref(false);
const route = useRoute();
const router = useRouter();
const shopId = route.params.id;
const cartStore = useCartStore();
const { cartList } = cartStore;
const useCartEffect = (shopId) => {
  const total = computed(() => {
    const productList = cartList[shopId];
    let count = 0;
    if (productList) {
      for (const i in productList) {
        const product = productList[i];
        count += product.count;
      }
    }
    if (count == 0) {
      show.value = false;
    }
    return count;
  });
  const price = computed(() => {
    const productList = cartList[shopId];
    let count = 0;
    if (productList) {
      for (const i in productList) {
        const product = productList[i];
        if (product.check) {
          count += product.count * product.price;
        }
      }
    }
    return count.toFixed(2);
  });
  const productList = computed(() => {
    const productList = cartList[shopId] || {};
    return productList;
  });
  const all = computed(() => {
    const productList = cartList[shopId];
    let result = true;
    if (productList) {
      for (const i in productList) {
        const product = productList[i];
        if (product.count > 0 && !product.check) {
          result = false;
          break;
        }
      }
    }
    return result;
  });
  return { total, price, productList, all };
};

const { changeItemToCart, changeChecked, clearCart, allCart } =
  CommonCartEffect(shopId);
const { total, price, productList, all } = useCartEffect(shopId);

const jumptoOrder = () => {
  if (price.value > 0) {
    router.push({ name: "ConfirmOrder", params: { shopId: shopId } });
  } else {
    return;
  }
};

const showCart = () => {
  if (total.value > 0) {
    show.value = !show.value;
  } else {
    return;
  }
};
const clearCartHandle = (shopId) => {
  show.value = false;
  clearCart(shopId);
};
</script>

<template class="bigbox">
  <div class="cart-overlay" v-if="show">
    <div class="grow" @click="show = false"></div>
    <div class="cart-content">
      <span
        ><input
          type="checkbox"
          :checked="all"
          @click="allCart(shopId)"
        />全选</span
      >
      <span class="clear" @click="clearCartHandle(shopId)">清空购物车</span>
      <div class="container">
        <ul class="goods">
          <li v-for="item in productList" :key="item.id">
            <input
              type="checkbox"
              name=""
              id=""
              :checked="item.check"
              @change="changeChecked(shopId, item.id)"
            />
            <img :src="item.img_url" alt="" class="img" />
            <div>
              <h4 class="title">{{ item.name }}</h4>
              <p class="p_btn">
                <span class="new">￥{{ item.price }}</span
                >&nbsp;&nbsp;&nbsp;<span class="old"
                  >￥{{ item.oldPrice }}</span
                >
                <span
                  class="plus"
                  @click="changeItemToCart(shopId, item.id, item, 1)"
                  ><van-icon name="plus" color="white" size="16px"
                /></span>
                {{ item.count || 0 }}
                <span
                  class="minus"
                  @click="changeItemToCart(shopId, item.id, item, -1)"
                  ><van-icon name="minus" color="#7643e1" size="16px"
                /></span>
              </p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="shoppingBar">
    <van-badge :content="total" position="top">
      <van-icon name="shopping-cart-o" class="icon" @click="showCart" />
    </van-badge>
    <span class="amount"
      >总计：<span class="money">￥{{ price }}</span></span
    >
    <div class="spend" @click="jumptoOrder">去结算</div>
  </div>
</template>
<style lang="scss" scoped>
.bigbox {
  height: 100vh;
  .cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 92.85%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    .grow {
      flex-grow: 1;
    }
    .cart-content {
      background: white;
      position: absolute;
      padding: 20px;
      width: 100%;
      border-radius: 8px 8px 0 0;
      text-align: left;
      bottom: -2px;
      .clear {
        position: absolute;
        right: 20px;
      }
      .container {
        width: 100%;
        height: 100px;
        overflow: auto;
        .goods {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          > li {
            display: flex;
            align-items: center;
            justify-content: space-around;
            > .img {
              width: 55px;
              height: 55px;
              margin-left: 10px;
            }

            > div {
              display: flex;
              flex-direction: column;
              margin-left: 8px;
              justify-content: space-between;
              .p_btn {
                width: 180px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                line-height: 25px;
              }
              .month {
                font-size: 13px;
                margin-top: 5px;
                color: #333333;
              }
              .old {
                font-size: 10px;
                margin-top: 5px;
                color: #a6a6a6;
                line-height: 25px;
                margin-left: -25px;
                text-decoration: line-through;
              }
              .new {
                font-size: 13px;
                margin-top: 5px;
                color: red;
                line-height: 25px;
              }
              .plus,
              .minus {
                border-radius: 50%;
                width: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                margin-bottom: 5px;
                // border: 5px solid #7643e1;
              }
              .plus {
                background-color: #7643e1;
              }
              .minus {
                border: 1px solid #7643e1;
              }
            }
          }
        }
      }
    }
  }
  .shoppingBar {
    width: 100%;
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: 1111;
    .icon {
      font-size: 27px;
      color: #0e96fd;
      margin-left: 20px;
      line-height: 48px;
    }
    .amount {
      line-height: 48px;
      margin-left: -50px;
      font-size: 12px;
      z-index: 111;
      .money {
        color: red;
        font-size: 18px;
      }
    }
    .spend {
      width: 25%;
      height: 48px;
      background-color: #7543e0;
      color: white;
      text-align: center;
      line-height: 48px;
    }
    .content {
      padding: 16px 16px 160px;
    }
  }
}
</style>
